<template>
  <div>
    <div class="el_submit">
      <el-button type="primary" @click="openNpcItemDialog()" style="margin-bottom:10px">新增</el-button>
    </div>
    <el-table :data="npcItemData" border style="width: 100%" max-height="250">
      <el-table-column prop="operation" align="center" width="120" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="delRow(scope.$index)">删除</el-button>
          <el-button type="text" @click="editRow(scope.row,scope.$index)">编辑</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="materialNo" align="center" label="物料编码" width="150"></el-table-column>
      <el-table-column prop="materialName" align="center" label="物料名称" width="250"></el-table-column>
      <el-table-column prop="unit" align="center" label="计量单位" width="120"></el-table-column>
      <el-table-column prop="sampleNumber" align="center" label="打样数量" width="100"></el-table-column>
      <el-table-column prop="requireTime" align="center" label="样品提供日期" width="200"></el-table-column>
      <el-table-column prop="figureNumber" align="center" label="图号" width="200"></el-table-column>
      <el-table-column prop="checkingFileName" align="center" label="检验标准" width="200">
        <template slot-scope="scope">
          <el-button type="text" @click="downloadFiles(scope.row.checkingFileUrl,scope.row.checkingFileName)">{{scope.row.checkingFileName}}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="drawingFileName" align="center" label="图纸" width="200">
        <template slot-scope="scope">
          <el-button type="text" @click="downloadFiles(scope.row.drawingFileUrl,scope.row.drawingFileName)">{{scope.row.drawingFileName}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增打样任务明细 -->
    <div>
      <dialog-ext :title="dialogUpdate?'编辑':'新增'" v-model="dialogFormVisible" @cancelDialog="cancel" @submitForm="submitForm" width="40%">
        <el-form :model="addNpcItem" ref="addNpcItem" label-width="100px">
          <el-form-item label="是否新物料" style="margin-bottom: 22px">
            <el-switch v-model="addNpcItem.isNewMtrl" inactive-value="0" active-value="1" @change="isNewMat"></el-switch>
          </el-form-item>
          <el-form-item label="物料编码" prop="materialNo" style="margin-bottom: 22px" v-if=!newMat>
            <select-fac-material v-model="addNpcItem.materialNo" @on-selection-data="getRowData" :purOrgId="transitivePurOrgId" :factoryId="transitiveFactoryId"></select-fac-material>
          </el-form-item>
          <el-form-item label="物料名称" prop="materialName" style="margin-bottom: 22px">
            <el-input v-model="addNpcItem.materialName" :readonly="isReadonly"></el-input>
          </el-form-item>
          <el-form-item label="计量单位" prop="unit" style="margin-bottom: 22px">
            <el-input v-model="addNpcItem.unit" :readonly="isReadonly"></el-input>
          </el-form-item>
          <el-form-item label="打样数量" prop="sampleNumber" style="margin-bottom: 22px">
            <el-input v-model="addNpcItem.sampleNumber"></el-input>
          </el-form-item>
          <el-form-item label="样品提供日期" prop="requireTime" style="margin-bottom: 22px">
            <el-date-picker type="date" placeholder="选择日期" v-model="addNpcItem.requireTime" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item label="图号" prop="figureNumber" style="margin-bottom: 22px">
            <el-input v-model="addNpcItem.figureNumber"></el-input>
          </el-form-item>
          <el-form-item label="图纸：">
            <el-upload
              class="upload-file"
              ref="upload"
              :action="this.lib.config.host.system + '/common/fileupload/upload'"
              :data=fileData
              :limit="1"
              :on-success="uploadSuccess1"         
              :file-list="fileList1">
              <el-button slot="trigger" type="primary">选取文件</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="检验标准：">
            <el-upload
              class="upload-file"
              ref="upload"
              :action="this.lib.config.host.system + '/common/fileupload/upload'"
              :data=fileData
              :limit="1"
              :on-success="uploadSuccess2"         
              :file-list="fileList2">
              <el-button slot="trigger" type="primary">选取文件</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </dialog-ext>
    </div>
  </div>
</template>
<script>
  import DialogExt from '@/components/common/dialog-ext/dialog-ext';
  import SelectFacMaterial from '@/components/common/select-ext/select-facMaterial';
  export default {
    components: {
      DialogExt,
      SelectFacMaterial
    },
    data() {
      return {
        dialogUpdate: false,
        newMat:false,
        // 父组件传递的采购组织ID
        transitivePurOrgId:'',
        transitiveFactoryId:'',
        // 初始化表格数据
        //npcItemData: [],
        // 上传附件集合
        fileList1: [],
        fileList2: [],
        // 定义附件的业务模块和业务动作
        fileData: {
          busAction: "ADD",
          tableName: "NPC_TASK_ITEM"
        },
        // 对话框显示、隐藏属性
        dialogFormVisible: false,
        // 打样明细Index
        npcItemIndex: null,
        // 新增供应商表单
        addNpcItem: {
          materialName:'',
          drawingFileName: '',
          drawingFileUrl: '',
          checkingFileUrl: '',
          checkingFileName: '',
          materialNo:'',
          unit:''
        },
        // 是否仅读
        isReadonly:true
      };
    },
    // 子组件接收传参
    props:['purOrgId','factoryId','npcItemData'],
    created(){
      this.transitivePurOrgId =  this.purOrgId;
      this.transitiveFactoryId =  this.factoryId;
    },
    mounted() {
    },
    watch:{
      //监听新增|删除数据，发生变化，触发父组件change-data方法
      'npcItemData':function (val) {
        this.$emit('changeMaterialData', val);
      },
      'purOrgId':function (val) {
        this.transitivePurOrgId =  val;
      },
      'factoryId':function (val) {
        this.transitiveFactoryId =  val;
      }
    },
    methods: {
      // 打开明细对话框
      openNpcItemDialog(){
        if(this.transitivePurOrgId == '' || this.transitiveFactoryId == ''){
            this.$message({
              showClose: true,
              message: '请选择采购组织和工厂!',
              type: 'warning'
            });
        } else {
            this.dialogFormVisible = true
        }
        this.dialogUpdate = false;
      },
      // 监听是否为新物料Switch开关
      isNewMat(){
       if(this.addNpcItem.isNewMtrl == 1){
          this.isReadonly = false
          this.newMat=true
       } else {
          this.isReadonly = true
          this.newMat=false
       }
      },
      submitForm(){
        if(this.dialogUpdate){ // 修改开发申请明细数据
          // this.$set(this.npcItemData, this.npcItemIndex,{...this.addNpcItem})
          this.npcItemData.splice(this.npcItemIndex, 1, {...this.addNpcItem});
        } else { // 新增开发申请明细数据
          this.npcItemData.push({
            ...this.addNpcItem
          });
        }
        // 清空对话框内容
        this.resetForm('addNpcItem');
        this.fileList1=[];
        this.fileList2=[];
        this.dialogFormVisible = false;  // 对话框显示、隐藏属性
      },
      // 删除行
      delRow(index) {
        this.npcItemData.splice(index, 1);
      },
      // 编辑行
      editRow(row, index) {
        debugger;
        this.dialogFormVisible = true;
        this.npcItemIndex = index;
        if(!!row.drawingFileUrl){
          debugger;
          this.fileList1.push({
            url: row.drawingFileUrl,
            name: row.drawingFileName
          })
        }
        if(!!row.checkingFileUrl){
          this.fileList2.push({
            url: row.checkingFileUrl,
            name: row.checkingFileName
          })
        }
        this.$nextTick(()=>{
          this.addNpcItem =  {...row};
        })
        this.dialogUpdate = true;
      },
      cancel(){
        this.resetForm('addNpcItem');
        this.fileList1=[];
        this.fileList2=[];
      },
      // 处理附件上传异常
      handleExceed(files, fileList){
        console.log(files);
        console.log(fileList);
      },
      // 自动上传附件后返回附件url和name（图纸）
      uploadSuccess1: function (response) {
        //附件上传成功回调
        this.addNpcItem.drawingFileName = response.fileName;
        this.addNpcItem.drawingFileUrl = response.url
      },
      // 自动上传附件后返回附件url和name（检验标准）
      uploadSuccess2: function (response) {
        //附件上传成功回调
        this.addNpcItem.checkingFileUrl = response.url;
        this.addNpcItem.checkingFileName = response.fileName
      },
       // 双击供应商触发
      getRowData(data){
        this.addNpcItem.materialName = data.materialName;
        this.addNpcItem.materialNo = data.materialCode;
        this.addNpcItem.unit = data.purUnitCode;
      },
      // 下载附件
      downloadFiles(filePath,fileName){
         this.downloadFile(filePath, fileName);
      }
    }
  }
</script>
<style>
  .upload-file{
    display: flex;
    flex-direction: row-reverse;
    height: 40px;
    width: 380px;
  }
  
  .upload-file .el-upload-list {
    display: flex;
    flex-direction: row;
    width: calc(100% - 112px);
    border: 1px solid #dcdfe6;
    margin-right: 16px;
    border-radius: 4px;
  }

  .upload-file .el-upload-list li{
    margin-top: 0;
    line-height: 38px;
    vertical-align: middle;
  }

  .upload-file .el-upload-list li .el-icon-close{
    line-height: inherit;
    top:0;
  }
</style>